<template>
    <div class="large-left1 large-panel" @click="openChild">
        <div class="panel-title">
            <div class="panel-title-box">
                <img class="panel-title-ico" src="@/assets/large/panel-title-ico.png" />
                机构信息
            </div>
            <img class="panel-title-bg" src="@/assets/large/panel-title.png" />

        </div>
        <div style="position:relative">
            <div id="largeChartleft1"></div>
            <div class="center-bg">
                <img class="center-bg-img" src="@/assets/large/left1-center.png" />
                <span class="center-words">职位占比</span>
            </div>
        </div>
        <Left1childVue :visible="childVisible" @closeModal="() => childVisible = false" v-if="childVisible"/>
    </div>
</template>

<script lang="ts">
import { echartLoad, toDecimalNoZero } from "@/utils";
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import Left1childVue from "../child/left1child.vue";
@Component({
    name: "home",
    components: { Left1childVue },
})
export default class extends Vue {
    @Prop({ default: () => {} }) pageData!: any;
    @Watch("pageData")
    pageDataChange() {
        this.setPageData()
    }
    dataList: any[] = [];
    chart: any = null;
    dataCount = 0;
    maxData = 1;
    mounted() {
        this.setPageData()
    }
    setPageData() {
        if(!this.pageData || !this.pageData.jobStatistics) return
        this.dataList = this.pageData.jobStatistics.map((item) => ({
            name: item.job,
            val: item.count,
        }));
        let total = 0;
        let max = 0;
        this.dataList.forEach((item) => {
            total += item.val;
            const val = Number(item.val);
            if (val > max) max = val;
        });
        this.dataCount = total;
        this.maxData = Number(max + max * 0.1);
        echartLoad(() => {
            this.setChart();
        });
    }
    childVisible = false;
    openChild() {
        this.childVisible = true;
    }
    beforeDestroy() {
        this.timer && clearInterval(this.timer);
    }
    currentIndex = -1;
    timer: any = null;
    autoHighlight() {
        const dataLen = this.dataList.length;
        // 取消之前的高亮
        this.chart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: this.currentIndex,
        });
        // 计算下一个索引
        this.currentIndex = (this.currentIndex + 1) % dataLen;
        // 高亮当前数据项
        this.chart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: this.currentIndex,
        });
        // 显示 Tooltip
        this.chart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: this.currentIndex,
        });
    }
    setChart() {
        if (this.chart) {
            this.resetChart();
        } else {
            this.initChart();
            // 启动定时器（每 2 秒切换一次）
            this.timer = setInterval(this.autoHighlight, 3000);

            // 鼠标悬停时暂停自动切换
            this.chart.on("mouseover", () => clearInterval(this.timer));
            this.chart.on("mouseout", () => {
                this.timer = setInterval(this.autoHighlight, 3000);
            });
        }
    }

    resetChart() {
        const options = this.chart.getOption();
        options.series = this.getSeries();
        this.chart.setOption(options, true);
    }
    initChart() {
        const chartDom = document.getElementById("largeChartleft1");
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        const options: any = {
            legend: {
                orient: "vertical",
                top: "center",
                left: "50%",
                itemGap: 2,
                textStyle: {
                    color: "#fff", // 文字颜色
                    fontSize: 14, // 字体大小,

                    rich: {
                        color: {
                            color: function (params) {
                                return params.color; // 关键！这里返回图例项的颜色
                            },
                        },
                    },
                },

                formatter: (name) => {
                    const dataItem = this.dataList.find((item) => item.name === name);
                    const le = toDecimalNoZero((dataItem.val / this.dataCount) * 100, 0);
                    return `{color|${name}  ${dataItem.val}  ${le}%}`;
                },
            },
            tooltip: {
                trigger: "item",
                formatter: "{b} : {d}%",
            },
            series: this.getSeries(),
        };
        if (chartDom) {
            this.chart = window.echarts.init(chartDom as HTMLDivElement);
            this.chart.setOption(options);
        }
    }

    getSeries() {
        return [
            {
                name: "机构类型统计",
                type: "pie",
                radius: ["75%", "90%"],
                center: ["25%", "50%"],
                avoidLabelOverlap: false,
                padAngle: 5,
                itemStyle: {
                    borderRadius: 2,
                },
                label: {
                    show: false,
                    position: "center",
                },

                labelLine: {
                    show: false,
                },
                data: this.dataList.map((item) => ({ value: item.val, name: item.name })),
            },
        ];
    }
}
</script>
<style lang="scss">
.large-left1 {
    #largeChartleft1 {
        width: 100%;
        height: 15vh;
    }
    .center-bg {
        height: 10vh;
        width: 10vh;
        position: absolute;
        left: calc(25% - 5vh);
        top: 2.5vh;
    }
    .center-words {
        background: linear-gradient(to bottom, #fff 0%, #fff 40%, #92dfd7 60%, #92dfd7 100%);
        background-clip: text;
        color: transparent;
        font-weight: bold;
        font-style: italic;
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .center-bg-img {
        width: 100%;
        animation: left1Animation 20s linear infinite;
    }
}
@keyframes left1Animation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}
</style>
